<template>
  <form @submit.prevent class="user-edit-pwd-wrapper" :class="fadeOutCls">
    <h2>更改密码</h2>

    <ul class="inputs">
      <li>
        <password-input
          class="old-pwd-input"
          placeholder="请输入旧密码"
          @change="
            (e) => {
              oldPwd = e.target.value
            }
          "
        ></password-input>
        <p>不输入则需要邮件确认</p>
      </li>
      <li>
        <password-input
          class="new-pwd-input"
          placeholder="请输入新密码"
          @change="inputNewPwd($event.target.value)"
        ></password-input>
        <i class="iconfont icon-warning" v-show="ifError[1].sign"></i>
        <p v-show="ifError[1].sign">{{ ifError[1].message }}</p>
      </li>
      <li>
        <password-input
          class="new-pwd-confirm"
          placeholder="请确认新密码"
          @change="inputPwdConfirm($event.target.value)"
        ></password-input>
        <i class="iconfont icon-warning" v-show="ifError[2].sign"></i>
        <p v-show="ifError[2].sign">{{ ifError[2].message }}</p>
      </li>
    </ul>

    <button class="submit" @click="submit">修改</button>

    <i class="iconfont icon-cancel" @click="$emit('exit')"></i>
  </form>
</template>

<script lang="ts" setup>
import PasswordInput from '@/components/utils/Input/PasswordInput.vue'
import { useUserStore } from '@/store/user'
import { ref, reactive, computed } from 'vue'

defineProps<{
  fadeOut: boolean
}>()

let oldPwd = ref('')
let newPwd = ref('')
let pwdConfirm = ref('')
let ifError = reactive([
  {
    sign: false,
    message: '',
  },
  {
    sign: false,
    message: '',
  },
  {
    sign: false,
    message: '',
  },
])

function inputNewPwd(password: string) {
  newPwd.value = password
  checkPwd()
}

function inputPwdConfirm(password: string) {
  pwdConfirm.value = password
  checkPwd()
}

function checkPwd() {
  if (newPwd !== pwdConfirm) {
    ifError[1].sign = ifError[2].sign = true
    ifError[1].message = ifError[2].message = '两次输入密码不一致'
  } else if (!(/[a-zA-Z]/.test(newPwd.value) && /[0-9]/.test(newPwd.value))) {
    ifError[1].sign = ifError[2].sign = false
    ifError[1].message = ifError[2].message = ''
    ifError[1].sign = true
    ifError[1].message = '密码至少包含一个字母和一个数字'
  } else if (newPwd.value.length < 6) {
    ifError[1].sign = ifError[2].sign = false
    ifError[1].message = ifError[2].message = ''
    ifError[1].sign = true
    ifError[1].message = '密码长度至少六位'
  } else {
    ifError[1].sign = ifError[2].sign = false
    ifError[1].message = ifError[2].message = ''
    return true
  }
}

const userStore = useUserStore()

function submit() {
  let kvp = {
    key: 'userpwd',
    value: newPwd,
  } as any
  if (oldPwd) kvp.oldpwd = oldPwd
  userStore.changeAccountInfo(kvp)
}

let fadeOutCls = computed(() => '')
</script>

<style lang="scss" scoped>
.user-edit-pwd-wrapper {
  box-sizing: border-box;
  padding: 2vw 1vw;

  background-color: white;
  border-radius: 1vw;
  transition: 0.3s;

  h2 {
    text-align: center;
    color: var(--blue);
    font-size: 1.8vw;
  }

  .old-pwd-input,
  .new-pwd-input,
  .new-pwd-confirm {
    --passwordInputWidth: 20vw;
    --passwordInputHeight: 3vw;
    --passwordInputFontsize: 1.2vw;
    margin: 2vw auto;
  }

  > .iconfont {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5vw 0.8vw;
    font-size: 1vw;
    font-weight: bold;
    transition: 0.2s;

    &:hover {
      transform: rotate(90deg);
      cursor: pointer;
    }
  }

  .inputs li {
    position: relative;

    > i {
      color: red;
      position: absolute;
      top: 50%;
      right: 1vw;
      transform: translateY(-50%);
    }

    > p {
      position: absolute;
      top: 100%;
      left: 3vw;
      font-size: 0.6vw;
      color: red;
    }
  }

  > .submit {
    margin: 0 2.5vw;
    width: 20vw;
    height: 3vw;
    color: white;
    font-weight: bold;
    border-radius: 1.5vw;
    background-image: linear-gradient(-200deg, #fac0e7, #91baff);
  }
}
</style>
